import React, { useEffect, useState } from 'react';
import { management, state, search, sift } from '../../../api/index';
import './index.scss'
import Search from 'antd/es/input/Search';
import { Button, Dropdown, Space, Table, Image } from 'antd';
import { useNavigate } from 'react-router';
import { CaretDownOutlined, CaretUpOutlined, DownOutlined } from '@ant-design/icons';
import { useDispatch } from 'react-redux';
const Myindex = () => {
    const dispath = useDispatch()

    const navigate = useNavigate()
    // 订单信息
    const [orders, setOrders] = useState()
    // 列表渲染
    const [list, setList] = useState(['全部订单', '待付款', '待发货', '待签收', '待评价', '待退款', '已完成', '已取消'])
    const [data, setData] = useState('全部订单')
    const [moneylist, setMoneylist] = useState(['全部', '微信', '支付宝'])
    const [moeny, setMoeny] = useState('全部')
    //下标渲染数据
    const [subscript, setSubscript] = useState(0)
    const [flag, setFlag] = useState(false)
    //搜索值
    const [value, setValue] = useState('')
    useEffect(() => {
        dataList()
    }, [])
    useEffect(() => {
        handPay()
    }, [moeny])
    useEffect(() => {
        handSift()
    }, [data])
    const dataList = async () => {
        let res = await management()
        if (res.data.code == 200) {
            setOrders(res.data.data)
            res.data.data.map((item: any, index: number) => {
                return item.key = index
            })
        }
    }
    const handClick = async (index: number, item: string) => {
        setSubscript(index)
        let res = await state({ state: item })
        console.log(res.data.data);

        if (res.data.code == 200) {
            setOrders(res.data.data)
        } else {
            setOrders(res.data.data)
        }
    }
    const onSearch = async () => {
        let res = await search({ fuzzyqueries: value })
        if (res.data.code == 200) {
            setOrders(res.data.data)
        }
    }
    const handSift = async () => {
        let res = await sift({ type: data, manner: moeny })
        if (res.data.code == 200) {
            setOrders(res.data.data)
        }
    }
    const handPay = async () => {
        let res = await sift({ type: data, manner: moeny })
        if (res.data.code == 200) {
            setOrders(res.data.data)
        }
    }
    //更多选项之全部订单
    const items: any = jindan();
    function jindan() {
        return list.map((item: string, index: number) => {
            return {
                label: <span onClick={() => {
                    setData(item)
                    handSift()
                }}>{item}</span>,
                key: index,
            }
        })
    };
    //更多选项之支付方式
    const item: any = jin();
    function jin() {
        return moneylist.map((item: string, index: number) => {
            return {
                label: <span onClick={() => {
                    setMoeny(item)
                    handPay()
                }}>{item}</span>,
                key: index,
            }
        })
    };
    //表格渲染数据
    const columns = [
        {
            title: '订单号',
            dataIndex: 'id',
            key: 'id',
        },
        {
            title: '订单号',
            key: 'id',
            render: (text: any) => {
                return (
                    < Image
                        width={100}
                        src={text.img}
                    />
                )
            }

        },
        {
            title: '订单商品',
            key: 'shopping_name',
            render: (text: any) => {
                return (
                    <div className='shopping_name'>
                        <span>{text.shopping_name}</span>
                        <span>{'颜色:' + text.shopping_color}</span>
                        <span>{'￥' + text.shopping_price + '*' + text.shopping_num}</span>
                    </div>
                )
            }
        },
        {
            title: '订单快递',
            key: 'shopping_delivery',
            render: (text: any) => {
                return (
                    <div className='shopping_delivery'>
                        <span>{text.shopping_delivery}</span>
                        <span>{text.arrival_time}</span>
                        <span>{'运费:' + `${text.freight == 0 ? '包邮' : ''}`}</span>
                    </div>
                )
            }
        },
        {
            title: '下单时间',
            dataIndex: 'order_time',
            key: 'order_time',
        },
        {
            title: '付款时间',
            dataIndex: 'payment_time',
            key: 'payment_time',
        },
        {
            title: '实际付款',
            key: 'shopping_price',
            render: (text: any) => {
                return (
                    < div className='price'>
                        {'￥' + text.shopping_price * text.shopping_num}
                    </div>
                )
            }
        },
        {
            title: '购买人',
            dataIndex: 'username',
            key: 'username',
        },
        {
            title: '状态',
            dataIndex: 'state',
            key: 'state',
        },
        {
            title: '操作',
            key: 'operate',
            render: (text: any) => {
                return (
                    < div className='op'>
                        <Button type="primary" onClick={() => {
                            dispath({ type: "ADD_ID", payload: text.id })
                            navigate('/index/orderseckirt', { state: text })

                        }}>订单详情</Button>
                        {
                            text.state === '待发货' ? <Button style={{ marginTop: '10px' }} onClick={() => { }}>发货</Button > : ''
                        }
                    </div>

                )
            }
        },
    ];
    return (
        <div className='orders'>
            <div className="nav">
                <ul>
                    {
                        list.map((item: any, index: number) => {
                            return (
                                <>
                                    <li onClick={() => { handClick(index, item) }} className={`${subscript === index ? 'active' : ''}`} key={index}>{item}</li>
                                </>
                            )
                        })
                    }
                </ul>
            </div>
            <div className="search">
                <div className="shang">
                    <Search
                        className='sea'
                        placeholder="输入用户昵称、订单号或者商品名进行搜索"
                        allowClear
                        enterButton="搜索"
                        size="large"
                        value={value}
                        onChange={(e) => {
                            setValue(e.target.value)
                        }}
                        onSearch={onSearch}
                    />
                    <Button type="primary" size='large' onClick={() => { setFlag(!flag) }}>
                        更多筛选项{flag ? <CaretUpOutlined /> : <CaretDownOutlined />}
                    </Button>
                </div>
                <div className={flag ? 'xia' : 'xia act'}>
                    <div className="drop">
                        全部订单：
                        <Dropdown.Button menu={{ items }} className='dropbutton' trigger={['click']} icon={<DownOutlined />}>
                            <Space>
                                {data}
                            </Space>
                        </Dropdown.Button>
                    </div>
                    <div className="drop">
                        支付方式：
                        <Dropdown.Button menu={{ items: item }} className='dropbutton' trigger={['click']} icon={<DownOutlined />}>
                            <Space>
                                {moeny}
                            </Space>
                        </Dropdown.Button>
                    </div>
                </div>
            </div>
            <div className="table">
                <Table dataSource={orders} columns={columns} />
            </div>
        </div >
    );
};

export default Myindex;